import React from 'react'
import StateMixin from 'reflux-state-mixin'
import Top from 'pages/serviceitems/top.jsx'
import Squares from 'pages/serviceitems/squares.jsx'
import List from 'pages/serviceitems/list.jsx'
import SrvItemAction from 'pages/serviceitems/actions/serviceItemAction.js'
import SrvItemStore from 'pages/serviceitems/stores/serviceItemStore.js'
import { Modal , Pagination } from 'antd'

export default React.createClass({
  mixins: [StateMixin.connect(SrvItemStore)],
  getInitialState() {
    return {
      visible: false,
      pageSize:12,
      keyword: null,
      current: 1
    }
  },
  componentDidMount() {
    this.getSrvItemList(1,null);
  },
  getSrvItemList(pageNumParam,key) {
    // console.log('key:'+key+',pageNum:'+pageNumParam)
    SrvItemAction.getSrvItemList({
      current: pageNumParam,
      pageSize:this.state.pageSize,
      keyword: key
    });
  },
  jumpToPage(e) {
    this.getSrvItemList(e, this.state.keyword);
    this.setState({
      current:e
    });
  },
  getSrvItemByKwd(event) {
    const val = event.target.value;
    this.setState({
      keyword: val,
      current: 1
    });
    this.getSrvItemList(1, val);
  },
  deleteItem(id) {
    const refreshSrvItemList = this.getSrvItemList;
    log(JSON.stringify({ids:[id]}))
    Modal.confirm({
      title: '您是否确认要删除该服务项',
      onOk() {
        // console.log('goto delete' +modelId);
        SrvItemAction.deletItems({
          ids:[id]
        }).then(() => {
          // console.log('delete ok')
          refreshSrvItemList();
        });
      },
      onCancel() {},
    });
  },
  changeStatus(id,checked) {
    SrvItemAction.changeStatus({
      id:id,
      status:checked ? 1 : -1
    }).then(() => {
      this.getSrvItemList(this.state.current, this.state.keyword);
    });
  },
  switchToSquare() {
    this.setState({
      visible : false
    });
  },
  switchToTable() {
    this.setState({
      visible : true
    });
  },
  render() {
    return (
      <div className="">
          <Top visible={this.state.visible} 
               switchToSquare={this.switchToSquare}
               switchToTable={this.switchToTable}
               getSrvItemByKwd={this.getSrvItemByKwd} />
          { this.state.visible 
            ? <List deleteItem={this.deleteItem}
              changeStatus={this.changeStatus}/> 
            : <Squares deleteItem={this.deleteItem} changeStatus={this.changeStatus} /> 
          }
          <div className="cut-off" />
        {
          this.state.count > this.state.pageSize
          ? <div className="pagination">
              <Pagination id='page'
                current={this.state.current}
                pageSize={this.state.pageSize}
                total={this.state.count}
                onChange={this.jumpToPage} />
            </div>
          : null
        }
      </div>
    )
  }
});
